<template>
  <div :class="getClass">
    <MultipleTabs v-if="isShowMultipleTab" />
    <LayoutBreadcrumb v-if="isShowBreadCrumb" />
  </div>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import MultipleTabs from '../tabs/tabs-nav.vue';

import { getGlobalCls } from '@/utils/index';
import LayoutBreadcrumb from './components/bread-crumb.vue';

// const HEADER_HEIGHT = 48;

defineOptions({ name: 'LayoutMultipleHeader' });
const { prefixCls } = getGlobalCls('container-multiple-header');
import { useAppStore } from '@/store/modules/app';
const appStore = useAppStore();

const isShowMultipleTab = computed(() => appStore.getMultiTabsSetting.show);

const isShowBreadCrumb = computed(() => appStore.getProjectConfig.showBreadCrumb);

const getClass = computed(() => {
  return [prefixCls];
});
</script>
<style lang="scss">
  $prefix-cls: #{config.$namespace}-container-multiple-header;

.#{$prefix-cls} {
  flex: 0 0 auto;
  transition: width 0.2s;
}
</style>
